<template>
  <div>
    <p>x: {{ pos.x }} y: {{ pos.y }}</p>
  </div>
</template>

<script>
import { onMounted, reactive, onBeforeUnmount } from 'vue'
export default {
  setup() {
    // #1 准备【对象】存放 x 和 y
    const pos = reactive({
      x: 0,
      y: 0,
    })
    const mousemove = (e) => {
      pos.x = e.pageX
      pos.y = e.pageY
    }
    // #2 监听 mousemove 事件，在回调函数里面设置位置到【对象】里面
    onMounted(() => document.addEventListener('mousemove', mousemove))
    // #3 组件销毁的时候解绑事件
    onBeforeUnmount(() => document.removeEventListener('mousemove', mousemove))
    return {
      pos,
    }
  },
}
</script>

<style lang="scss" scoped></style>
